<template>
    <div>
      <el-button size="small" :disabled="!editMenu"
        @click="add"><i class="el-icon-plus"></i>&nbsp;添加按钮</el-button>
      <el-alert
        title="添加按钮时，URL一般对应后台功能接口"
        type="info"
        :closable="false"
        style="margin: 10px 0"
        show-icon>
      </el-alert>
      <el-table
        :data="tableData"
        size="small"
        stripe
        style="width: 100%">
        <el-table-column
          prop="name"
          label="按钮名称"
          min-width="100">
          <template slot-scope="scope">
            <span>
              <el-badge is-dot class="state-dot" :type="scope.row.state&&scope.row.state===1?'success':'danger'" />
              {{scope.row.name}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="按钮代码"
          min-width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改">
              <el-button type="text" @click="edit(scope.row)">
                <i class="fa fa-edit"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="禁用" v-if="scope.row.state===1">
              <el-button type="text" @click="enablePerms(scope.row.id, false)">
                <i class="fa fa-ban text-danger"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="启用" v-if="scope.row.state===0">
              <el-button type="text" @click="enablePerms(scope.row.id, true)">
                <i class="fa fa-check-circle text-success"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除">
              <el-button type="text" @click="deletePerms(scope.row.id)">
                <i class="fa fa-trash text-danger"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!---->
      <AddEditBtnDialog v-if="showEditForm" :show.sync="showEditForm" :permData="editData" :menuId="editMenu.id"></AddEditBtnDialog>

    </div>
</template>

<script>
    import AddEditBtnDialog from './AddEditBtnDialog'

    export default {
      name: "ResBtnManagePage",
      props: ['editMenu'],
      components: {AddEditBtnDialog},
      watch: {
        editMenu: {
          handler() {
            if(this.editMenu)
              this.query();
            else
              this.tableData = null;
          },
          immediate: true,
          deep: true
        }
      },
      data() {
        return {
          loading: false,
          tableData: null,
          editData: null,
          showEditForm: false
        }
      },
      methods: {
        query() {
          this.loading = true;
          this.api.post('/bucket-system/system/resources/btnList', {pid: this.editMenu.id, type: 'button'})
            .then((data) => {
              data.data.sort((a, b) => {
                return a.sort - b.sort;
              });
              this.tableData = data.data;
              this.loading = false;
            });
        },
        add() {
          this.editData = null;
          this.showEditForm = true;
        },
        edit(row) {
          this.showEditForm = true;
          this.editData = row;
        },
        enablePerms(id, enable) {
          let _ids = [];
          let _url = '/bucket-system/system/resources/disable';
          // if(!id && this.selectedRows.length>0){
          //   this.selectedRows.forEach(function(_s, index, arr){
          //     _ids.push(_s.id);
          //   });
          // }else
          _ids.push(id);
          if(enable)
            _url = '/bucket-system/system/resources/enable';
          this.api.post(_url, {id: _ids.join(',')})
            .then((data) => {
              if(data.code===200){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.query();
              }else{
                this.$message.error(data.data);
              }
            });
        },
        deletePerms: function(id){
          this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
            .then(() => {
              let _ids = [];
              // if(!id && this.selectedRows.length>0){
              //   this.selectedRows.forEach(function(_s, index, arr){
              //     _ids.push(_s.id);
              //   });
              // }else
              _ids.push(id);
              this.api.post('/bucket-system/system/resources/delete', {id: _ids.join(',')})
                .then((data) => {
                  if(data.code===200){
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    });
                    this.query();
                  }else{
                    this.$message.error(data.data);
                  }
                });
              done();
            });
        },
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .state-dot {
    position: relative;
    top: 6px;
  }
</style>
